<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用在线地址 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->

    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- {{msg}}  Vue的模板语法(文本插值,类似ES6的模板字符串${}, 将{{}} 内的值拼接到标签内,作为标签内的文本 )   -->
    <div id="app">
        <p>{{msg}}</p>
        <p>{{count}}</p>
    </div>
</body>
<script>
    /* 

        
        一. 介绍: 
        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

        二. 安装(vue属于第三方开源前端框架)
            1.  先下载  (a. 直接下载到本地  b. 使用在线地址(CDN))
            2.  在引入 
            3.  使用vue


        三. Vue的特征
            1. 声明式渲染
                Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

                a. vue允许采用简洁的模板语法 (Vue有自己的一套模板语法)
                b. 声明式地将数据渲染进DOM  (声明式: 在创建Vue实例的过程中,将挂载的数据渲染到对应视图中 => 可以理解为,页面加载时默认渲染一次)

            2. 响应式 
                当挂载的数据发生改变, 视图也会更新


        四.  Vue的option配置项
            new Vue(option)  构造函数Vue需要接收一个对象作为配置项,Vue的绝大部分功能都要依赖于此配置项实现

            详情:
                el: 挂载的元素(css选择器),当前Vue实例和哪个html元素绑定
                data:  挂载的数据  => 数据只有现在vue实例中挂载,才能在对应的模板语法中使用  (可以理解为 对应属性名查找Vue实例中的数据)


        五.  Vue实例的相关属性
            $el 挂载的元素(原生dom元素)
            $data 挂载的数据  



        注意: 
            1. Vue的绝大部分功能都要依赖于此配置项(new Vue(option))实现
            2. 数据只有现在vue实例中挂载,才能在对应的模板语法中使用 
            3. Vue中挂载的数据(data) 方法(methods) 计算属性(computed), 会在Vue实例中也挂载一份(可以直接通过Vue实例取值  => 也可以理解为默认语法中的变量查找范围都是通过Vue实例中查找)
            
    
    */

    // 声明式渲染
    var vm = new Vue({
        el:"#app", // 挂载的元素(css选择器),当前Vue实例和哪个html元素绑定
        data:{ // 挂载的数据  => 数据只有现在vue实例中挂载,才能在对应的模板语法中使用 (可以理解为 对应属性名查找data中的数据)
            msg:"hello world",
            count: 100,
        }
    });

    // 响应式演示:  当挂载的数据发生改变, 视图也会更新
    console.log(vm);   // Vue实例

    setTimeout(()=>{
        // 响应式
        // vm.$data.msg = "hello vue";
        // vm.$data.count = 200;

        // 响应式 优化!!
        // 1. 每次通过vm.$data取值和赋值比较麻烦
        // 2. 官方就在vue实例绑定同名属性, 对该属性取值和赋值时等价于操作$data的同名属性

        // for(let key in vm.$data){ // 遍历挂载的数据
        //     Object.defineProperty(vm,key,{ // 给vue实例绑定同名属性($data), 对该属性取值和赋值时等价于操作$data的同名属性
        //         get(){
        //             return vm.$data[key];
        //         },
        //         set(newVal){
        //             vm.$data[key] = newVal;
        //         }
        //     })
        // }

        vm.msg = "hello vue";
        vm.count = 200;

    },2000)


</script>
</html>